// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

import { useEffect, useState } from "react";


function App18() {
  // 1. 没有依赖项时， 组件初始渲染+组件更新时执行
  const [count, setCount] = useState(0)
  // useEffect(() => {
  //   console.log('副作用函数执行了')
  // })

  // 2. 空数组依赖项，只在初始渲染时执行一次
  // useEffect(() => {
  //   console.log('副作用函数执行了')
  // }, [])

  // 3. 添加特定依赖项，组件初始渲染+特定依赖项变化时执行
  useEffect(() => {
    console.log('副作用函数执行了')
  }, [count])  // 依赖项count只要发生变化就执行

  return (
    <div className="App">
      this is App
      <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  );
}

export default App18
